/**
 * WordPopover 组件 - 用于显示单词分析的弹出框
 * 
 * Props:
 * - word: Object - 单词对象，包含 english 和 analysis 属性
 * - lineIndex: Number - 行索引
 * - wordIndex: Number - 单词索引
 * 
 * Events:
 * - load-analysis: 当需要加载单词分析时触发
 */
Vue.component('word-popover', {
    template: `
        <el-popover
            placement="top"
            width="500"
            trigger="click"
            @show="handleShow">
                <div 
                    v-html="formatAnalysisContent(word.analysis)"
                    class="word-analysis-content">
                </div>
            <span slot="reference" class="word-reference">{{ word.english }}</span>
        </el-popover>
    `,
    
    props: {
        /**
         * 单词对象
         * @type {Object}
         * @required
         */
        word: {
            type: Object,
            required: true,
            validator(value) {
                return value && typeof value.english === 'string';
            }
        },
        
        /**
         * 行索引
         * @type {Number}
         * @required
         */
        lineIndex: {
            type: Number,
            required: true
        },
        
        /**
         * 单词索引
         * @type {Number}
         * @required
         */
        wordIndex: {
            type: Number,
            required: true
        }
    },
    
    methods: {
        /**
         * 处理弹出框显示事件
         * 触发父组件加载单词分析
         */
        handleShow() {
            this.$emit('load-analysis', this.word, this.lineIndex, this.wordIndex);
        },
        /**
                 * 格式化分析内容为HTML（公共方法）
                 * @param {string} content - 分析内容
                 * @returns {string} 格式化后的HTML内容
                 */
                formatAnalysisContent(content) {
                    if (!content) {
                        return '<div style="color: #999; font-style: italic;">加载中...</div>';
                    }
                    
                    if (content === '正在分析词汇...' || content.includes('正在解析') || content.includes('正在翻译')) {
                        return `<div style="color: #409EFF;"><i class="el-icon-loading"></i> ${content}</div>`;
                    }
                    
                    if (content.includes('获取词汇分析失败') || content.includes('解析失败') || content.includes('翻译失败')) {
                        return `<div style="color: #F56C6C;"><i class="el-icon-warning"></i> ${content}</div>`;
                    }
                    
                    // 将文本转换为HTML格式
                    let htmlContent = content
                        // 转义HTML特殊字符
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;')
                        // 处理换行
                        .replace(/\n\n/g, '</p><p>')
                        .replace(/\n/g, '<br>')
                        // 处理粗体标记
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        // 处理斜体标记
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        // 处理列表项
                        .replace(/^[\s]*\*[\s]+(.*?)(<br>|$)/gm, '<li>$1</li>')
                        // 处理数字列表
                        .replace(/^[\s]*\d+\.[\s]+(.*?)(<br>|$)/gm, '<li>$1</li>');
                    
                    // 包装段落
                    if (!htmlContent.includes('<p>') && !htmlContent.includes('<li>')) {
                        htmlContent = '<p>' + htmlContent + '</p>';
                    } else {
                        htmlContent = '<p>' + htmlContent + '</p>';
                    }
                    
                    // 处理列表
                    htmlContent = htmlContent.replace(/(<li>.*?<\/li>)/gs, '<ul>$1</ul>');
                    
                    return htmlContent;
                },
    }
});